<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2024-01-14 21:59:01
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-18 12:39:05
 * @FilePath: \vue3_admin_template\project\src\views\product\attr\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <Category :scene="sceneValue"></Category>
  </div>
  <div>
    <Table
      :tableData="atteTableList"
      :getScene="getScene"
      :getAttr="getAttr"
    ></Table>
  </div>
</template>

<script setup lang="ts">
import { watch, ref, onBeforeUnmount } from 'vue'
import { reqAttr } from '@/api/product/attr'
import type { AttrResponseData, AttrList } from '@/api/product/attr/type'
import useCategoryStore from '@/store/modules/category'
let categoryStore = useCategoryStore()
//存储已有属性和属性值的数组
let atteTableList = ref<AttrList>([])
//这种写法也行
// let atteTableList = ref<Attr[]>([]);
let pageInfo = ref({
  pageNo: 1,
  limit: 10,
  total: 0,
})
//监听仓库三级分类ID变化
watch(
  () => categoryStore.c3Id,
  () => {
    //清空上一次查询的属性和属性值
    atteTableList.value = []
    //保证三级分类ID不为空才能发请求
    if (categoryStore.c3Id) {
      getAttr()
    }
  },
)
//获取已有的属性和属性值方法
const getAttr = async () => {
  //获取分类Id
  const { c1Id, c2Id, c3Id } = categoryStore
  console.log(c1Id, c2Id, c3Id)
  let result: AttrResponseData = await reqAttr(c1Id, c2Id, c3Id)
  if (result.code == 200) {
    atteTableList.value = result.data
    pageInfo.value.total = atteTableList.value.length
  }
}
//获取table组件的场景getScene
let sceneValue = ref(0)
const getScene = (scene: any) => {
  sceneValue.value = scene.value
}
//路由跳转之前清空useCategoryStore的仓库
onBeforeUnmount(() => {
  categoryStore.$reset()
})
</script>

<style lang="scss" scoped></style>
